<template>
  <span class="pointer font-20">
    <span class="love-solid iconfont" v-if="modelValue" @click="clickLove">&#xe894;</span>
    <span class="love iconfont" v-else @click="clickLove">&#xe895;</span>
  </span>
</template>

<script lang="ts" setup>
  import { setSongLike } from '@/api/song'
  // eslint-disable-next-line no-undef
  defineOptions({
    name: 'Love'
  })

  const props = defineProps({
    modelValue: {
      type: Number,
      default: 0
    },
    sheetId: {
      type: Number
    },
    songId: {
      type: Number
    }
  })
  const emit = defineEmits(['update:modelValue'])

  const clickLove = () => {
    const isLike = props.modelValue ? 0 : 1
    emit('update:modelValue', isLike)

    setSongLike({
      sheetId: props.sheetId,
      songId: props.songId,
      isLike
    })
  }
</script>

<style lang="scss" scoped>
  .love {
    color: rgb(169, 169, 169);
    &:hover {
      color: rgb(250, 144, 144);
    }
  }
  .love-solid {
    color: #ff6a6a;
    &:hover {
      color: rgb(244, 85, 85);
    }
  }
</style>
